<template>
  <div
    class="box flex flex-wrap md:flex-nowrap items-start space-y-4 md:space-y-0 md:space-x-4"
  >
    <!-- 左侧组件 -->
    <Self class="w-full md:w-auto" />
    <!-- 推荐文章 -->
    <ArticleRecommend class="w-full md:w-auto" />
    <!-- 右侧组件 -->
    <div class="box2 flex flex-col w-full md:w-auto space-y-4">
      <Weather />
      <DateCard />
    </div>
  </div>
  <!-- 底部组件 -->
  <Study class="mt-4" />
</template>

<script setup>
import DateCard from './dateCard/index.vue'
import ArticleRecommend from './ArticleRecommend/index.vue'
import Self from './self/index.vue'
import Study from './Study/index.vue'
import Weather from './weather/index.vue'
</script>

<style lang="scss" scoped>
.box {
  @apply w-full;
}

.box2 {
  @apply w-full md:w-auto;
}
</style>
